<template>
  <div id="body">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item style="padding: 0 15px 0 15px;">
          <div class="titleHandle">
            <div>
              <span>{{ $t('area.Layer') }}</span>
              <treeselect
                v-model="mapValue"
                :placeholder=" $t('area.chosenLayer')"
                :max-height="300"
                :options="mapList"
                @input="handleMapChange"
              />
            </div>
            <div style="padding-top: 8px;">
              <span>{{ $t('fence.type') }}</span>
              <el-select v-model="fenceType" filterable :placeholder="$t('operating.pleaseChosen')" style="width: 200px;" @change="handleTypeChange">
                <el-option v-for="item in $t('fence.fenceTypeListTwo')" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </div>
            <div>
              <span>{{ $t('operating.operating') }}</span>
              <el-tooltip v-for="(item,index) in $t('fence.drawForms')" :key="index" effect="dark" :content="item.label" placement="bottom">
                <el-button :key="item.value" type="text" :autofocus="false" :data-id="item.value" :label="item.label" size="mini" @click="handleChange(index,item.value)">
                  <i :class="[item.id==colorFlag?item.unIconFont:item.iconFont]" />
                </el-button>
              </el-tooltip>
            </div>

          </div>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div style="height:100%;position: relative;margin: 0 15px 0 15px;background-color: #fff;">
      <div id="mapbox">
        <!-- 地图容器 -->
        <div id="map" :style="{height: mapHeight, width: mapWidth}" />
        <div class="positiondiv">
          <span />
        </div>
        <div class="scalediv">
          <span />
        </div>
      </div>
      <!--新增围栏-->
      <el-dialog width="30%" custom-class="changeDialog" :title="$t('fence.fenceSet')" :close-on-click-modal="false" :visible.sync="fenceEditVisible" append-to-body @close="closeDialog">
        <el-form ref="fenceForm" :model="fenceForm" label-width="120px" :rules="rules">
          <!--围栏名称-->
          <el-form-item :label="$t('fence.fenceName')">
            <el-input v-model="fenceForm.fenceName" style="max-width: 215px;" />
          </el-form-item>
          <!--围栏类型-->
          <el-form-item :label="$t('fence.fenceType')" prop="fenceType" :rules="filter_rules({required:'请输入围栏类型'})">
            <el-select v-model="fenceForm.fenceType" :multiple="true" filterable :placeholder="$t('operating.pleaseChosen')" style="max-width: 215px;">
              <el-option v-for="item in $t('fence.fenceTypeList')" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>

        </el-form>
        <!--操作-->
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="saveFenceEdit('fenceForm')">{{ $t('operating.determine') }}</el-button>
          <el-button type="danger" @click="deleteForm">{{ $t('operating.delete') }}</el-button>
        </span>
      </el-dialog>
      <!--删除围栏提示框-->
      <el-dialog :title="$t('operating.prompt')" :close-on-click-modal="false" :visible.sync="delFenceVisible" width="">
        <div class="del-dialog-cnt">{{ $t('operating.deletePrompt') }}</div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="deleteFence">{{ $t('operating.determine') }}</el-button>
          <el-button @click="delFenceVisible = false">{{ $t('operating.cancel') }}</el-button>
        </span>
      </el-dialog>
    </div>

  </div>

</template>

<script>
import { GeoJSON } from 'ol/format.js'
import { Draw, Modify, Snap, Select, Translate } from 'ol/interaction.js'
import { Circle, LineString, Point, Polygon } from 'ol/geom.js'
import { createRegularPolygon, createBox } from 'ol/interaction/Draw.js'
import {
  Load_Map,
  Load_Fence,
  _iMap,
  FenceSource,
  _createTooltip,
  _createMeasureTooltip,
  _TransMetric,
  Tooltip,
  TooltipElement,
  _dPR,
  measureTooltipElement,
  measureTooltip,
  releaseFence,
  LoadTypeData,
  sendThis
} from '@/utils/iMap.js'
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { baseUrl } from '@/utils/global.js'
import Cookie from 'js-cookie'

export default {
  components: { Treeselect },
  data() {
    return {
      fenceEditVisible: false,
      delFenceVisible: false,
      formValue: {
        cellername: '', // 用户姓名
        visitaim: '', // 来访目的
        tagid: '', // 绑定标签ID
        receivername: '' // 接待人员姓名
      },
      mapHeight: window.innerHeight - 60 + 'px', // 地图区域高度
      mapWidth: window.innerWidth + 'px',
      show1: true,
      show2: false,
      mapValue: null, // 选择的地图
      mapList: [],
      drawFormValue: 'None', // 绘制形状
      colorFlag: 0, // 切换操作图标颜色
      // drawForms: [
      //   { id:0,value: "None", label: "无操作",iconFont:'al-icon-carxuanzegongju1',unIconFont:'al-icon-carxuanzegongju' },
      //   // { id:1,value: "Circle", label: "绘制圆形" ,iconFont:'al-icon-carcheckbox-blank-circle-outline',unIconFont:'al-icon-carcheckbox-blank-circle' },
      //   { id:1,value: "Box", label: "绘制矩形" ,iconFont:'al-icon-carcheckbox-blank-outli',unIconFont:'al-icon-carcheckbox-blank' },
      //   { id:2,value: "Square", label: "绘制方块",iconFont:'al-icon-carrhombus-outline' ,unIconFont:'al-icon-carrhombus' },
      //   { id:3,value: "Polygon", label: "绘制多边形" ,iconFont:'al-icon-carpentagon-outline',unIconFont:'al-icon-carpentagon' },
      //   { id:4,value: "Select", label: "修改围栏" ,iconFont:'al-icon-carbianji-kong',unIconFont:'al-icon-carbianji-shi' }
      // ],

      fenceType: '',
      // fenceTypeList: [
      //   {value:'alarm',label:'告警'},
      //   {value:'camera',label:'监控'},
      //   {value:'check',label:'考勤'},
      //   {value:'operation',label:'部门'},
      //   {value:'polling',label:'巡检'},
      //   {value:'workspace',label:'工作区域'},
      //   {value:'warehouse',label:'仓库区域'}
      // ],
      // fenceTypeListTwo: [
      //   {value:'1',label:'全部类型'},
      //   {value:'alarm',label:'告警'},
      //   {value:'camera',label:'监控'},
      //   {value:'check',label:'考勤'},
      //   {value:'operation',label:'部门'},
      //   {value:'polling',label:'巡检'},
      //   {value:'workspace',label:'工作区域'},
      //   {value:'warehouse',label:'仓库区域'}
      // ],
      fenceForm: {
        fenceType: []
      },
      // 用户表单提交
      rules: {}, // 用户表单验证
      selectFeature: '', // 选中围栏
      _drawForm: null, // 保存当前绘制的形状
      _snap: null,
      _modify: null,
      _select: null,
      _translate: null,
      _tempval: '',
      _selectFeatureId: '',
      _selectFeatureName: '',

      //* ****点
      Point: null,
      //* ****线
      LineString: null,
      //* ****矩形
      Box: null,
      //* ****方块
      Square: null,
      //* ****圆形
      Circle: null,
      //* ****多边形
      Polygon: null,
      newFence: null
    }
  }, // 注册树形穿梭框组件
  // 钩子
  mounted() {
    // 动态设置map的高度
    // 首先在DOM渲染数据时，设置map的高度
    this.windowRefresh()
    const self = this
    window.onresize = function temp() {
      self.windowRefresh()
    }

    this.init()
  },
  methods: {
    // 刷新窗口
    windowRefresh: function() {
      this.mapHeight = window.innerHeight - 140 + 'px'
      this.mapWidth = window.innerWidth + 'px'
    },
    // 初始化默认地图
    initMap() {
      Load_Map(this.$store.state.initPicPath, 67.65, 54.16, 1600, 1280, 1600 / 67.65, [-40, -30])
      sendThis(this)
      LoadTypeData()
    },
    // 初始化函数
    init: function() {
      // 加载地图树
      this.$api.realtimeposition.getMapTree().then(res => {
        const RES = this.responseUse(res)
        this.mapList = RES
        // this.mapListData(res);
      })
      // 初始化地图
      this.initMap()
      this.fenceDraw_init()

      if (this.mapValue != '') {
        this.handleMapChange()
      }
    },
    closeDialog() {
      console.log(this.drawFormValue)
      if (this.drawFormValue == 'None' || this.drawFormValue == 'Select') {
        this.fenceModify_Destroy()
        this.fenceModify_init()
      } else {
        FenceSource.removeFeature(this.newFence)
      }
    },
    // 切换图层
    handleMapChange() {
      // this.v_MyMessage("选择的树分支ID：" + this.mapValue, "success");
      if (this.mapValue == '') {
        this.v_MyMessage(this.$t('Notice.mapIDIsEmpty'), 'error')
        return false
      } else {
        if (this.oldMapId != this.mapValue) {
          // console.log(this.mapValue,this.oldMapId);
          this.$api.realtimeposition.getMap(parseInt(this.mapValue)).then(res => {
            const RES = this.responseUse(res)
            this.mapName = RES.mapName
            Load_Map(
              baseUrl + RES.mapPath,
              RES.mapActualX,
              RES.mapActualY,
              RES.mapPixelX,
              RES.mapPixelY,
              RES.mapPixelX / RES.mapActualX,
              [RES.mapOriginX, RES.mapOriginY]
            )

            this.Geo = baseUrl + '/fenceInfo/findListByFenceTypeGeoJson?disable=layer,temporary&layerId=' + this.mapValue
            releaseFence()
            Load_Fence(this.Geo)
            if (this.drawFormValue == 'None') {
              this.show2 = true
              this.fenceDraw_Destroy()
              this.fenceModify_init()
            }
            if (this.drawFormValue != 'None' && this.drawFormValue != '') {
              this.handleChange(this.colorFlag, this.drawFormValue)
            }
          })
        }
      }
    },
    // 切换围栏类型
    handleTypeChange(val) {
      if (!this.mapValue) {
        this.v_MyMessage(this.$t('Notice.pleaseSelectALayerFirst'), 'warning')
        return
      } else {
        this.$api.realtimeposition.getMap(parseInt(this.mapValue)).then(res => {
          const RES = this.responseUse(res)
          this.mapName = RES.mapName
          Load_Map(
            baseUrl + RES.mapPath,
            RES.mapActualX,
            RES.mapActualY,
            RES.mapPixelX,
            RES.mapPixelY,
            RES.mapPixelX / RES.mapActualX,
            [RES.mapOriginX, RES.mapOriginY]
          )
          if (val == 1) {
            this.Geo = baseUrl + '/fenceInfo/findListByFenceTypeGeoJson?disable=layer,temporary&layerId=' + this.mapValue
          } else {
            this.Geo = baseUrl + '/fenceInfo/findListByFenceTypeGeoJson?disable=layer,temporary&fenceType=' + val + '&layerId=' + this.mapValue
          }
          releaseFence()
          Load_Fence(this.Geo)
          if (this.drawFormValue == 'None') {
            this.show2 = true
            this.fenceDraw_Destroy()
            this.fenceModify_Destroy()
            this.fenceModify_init()
          }
          if (this.drawFormValue != 'None' && this.drawFormValue != '') {
            this.handleChange(this.colorFlag, this.drawFormValue)
          }
        })
      }
    },
    /*
      * 操作切换
      * */
    handleChange(val, type) {
      console.log(val, type)
      this.colorFlag = val
      this.drawFormValue = type
      if (!this.mapValue) {
        this.v_MyMessage(this.$t('Notice.pleaseSelectALayerFirst'), 'warning')
        return
      } else {
        console.log(type)
        if (type == 'None') {
          this.show2 = false
          this.fenceDraw_Destroy()
          this.fenceModify_Destroy()
        } else if (type == 'Select') {
          this.show2 = true
          this.fenceDraw_Destroy()
          // this.fenceModify_Destroy();
          this.fenceModify_init()
          this.fenceModify_setActive(true)
        } else {
          this.show2 = false
          this.fenceModify_Destroy()
          this.fenceDraw_changeInteraction(type)
          this.fenceDraw_setActive(true, type)
        }
      }
    },
    /*
      * 删除
      * */
    deleteForm() {
      const sel = this.fenceModify_getSelectFeatures()
      // console.log(sel);
      if (sel.array_.length > 0) {
        this.fenceModify_Delete()
      } else {
        this.v_MyMessage(this.$t('Notice.fenceAreaNotSelected'), 'warning')
      }
    },
    // 是否显示面板
    showPanel() {
      this.show1 = !this.show1
      if (this.show1) {
        this.$refs.showPanel.style.right = '0px'
        console.log('this.$refs.showPanel.style.right = "0px";')
      } else {
        this.$refs.showPanel.style.right = '-270px'
        console.log('this.$refs.showPanel.style.right = "-270px";')
      }
    },
    // 确定添加围栏
    saveFenceEdit(formName) {
      const self = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.fenceId == null || this.fenceId == '' || this.fenceId == undefined) {
            b
            const param = {
              'fenceName': this.fenceForm.fenceName,
              'fenceType': this.fenceForm.fenceType.join(','),
              'layerId': this.mapValue,
              'layerName': this.mapName,
              'posGroupArray': eval(this.coors)
            }
            this.$api.fencemanage.addFence(param).then(res => {
              const RES = this.responseUse(res, true)
              if (RES) {
                this.fenceEditVisible = false
                this.fenceForm = { fenceType: [] }
                Load_Fence(this.Geo)
              }
            })
          } else {
            const param = {
              'fenceName': this.fenceForm.fenceName,
              'fenceType': this.fenceForm.fenceType.join(','),
              'layerId': this.mapValue,
              'layerName': this.mapName,
              'posGroupArray': eval(this.coors),
              'idx': this.fenceId
            }
            this.$api.fencemanage.addFence(param).then(res => {
              const RES = this.responseUse(res, true)
              if (RES) {
                this.fenceEditVisible = false
                this.fenceForm = { fenceType: [] }
                this.fenceDraw_Destroy()
                this.fenceModify_Destroy()
                this.fenceModify_init()
                this.fenceDraw_init()
                releaseFence()
                Load_Fence(this.Geo)
              }
            })
          }
        }
      })
    },
    // 确定删除围栏
    deleteFence() {
      const param = {
        'idx': this.idx
      }
      this.$api.fencemanage.deleteFence([param]).then(res => {
        const RES = this.responseUse(res, true)
        if (RES) {
          FenceSource.removeFeature(this.selectFeature)
        }
        this.delFenceVisible = false
        this.fenceEditVisible = false
        this.selectFeature = ''
      })
    },
    fenceDraw_init: function() {
      //* ****点
      this.Point = new Draw({ source: FenceSource, type: ('Point') })
      //* ****线
      this.LineString = new Draw({ source: FenceSource, type: ('LineString') })
      //* ****矩形
      this.Box = new Draw({ source: FenceSource, type: ('Circle'), geometryFunction: createBox() })
      //* ****方块
      this.Square = new Draw({ source: FenceSource, type: 'Circle', geometryFunction: createRegularPolygon(4) })
      //* ****圆形
      this.Circle = new Draw({ source: FenceSource, type: ('Circle') })
      //* ****多边形
      this.Polygon = new Draw({ source: FenceSource, type: ('Polygon') })

      /**
       * 创建工具栏tooltip
       */
      _createTooltip(true)
      _createMeasureTooltip()
    },
    fenceDraw_changeInteraction: function(type) {
      // 切换之前先移除，如果是第一操作，则不进行移除
      if (this._drawForm != null) {
        _iMap.removeInteraction(this._snap)
        _iMap.removeInteraction(this._drawForm)
      }
      this._tempval = type
      if (type === 'Box') {
        this._drawForm = this.Box
      } else if (type === 'Square') {
        this._drawForm = this.Square
      } else if (type === 'Circle') {
        this._drawForm = this.Circle
      } else if (type === 'Polygon') {
        this._drawForm = this.Polygon
      }
      this._snap = new Snap({ source: FenceSource })
      _iMap.addInteraction(this._snap)
      _iMap.addInteraction(this._drawForm)
    },
    fenceDraw_setEvents: function(type) {
      const self = this
      //* *****************绘制电子围栏tooltip开始******************//
      let sketch
      const pointerMoveHandler = function(evt) {
        if (evt.dragging) {
          return
        }
        let Msg = '点击开始绘制围栏'
        if (sketch) {
          const type = sketch.getGeometry().getType()

          switch (type) {
            case 'Polygon':
              Msg = '点击下一个点，或双击完成绘制'
              break
            case 'Circle':
              Msg = '点击外圆任意一点完成绘制'
              break
            default:
              Msg = ''
          }
        } else {
          Msg = '[' + _TransMetric(evt.coordinate, 4) + ']'
        }
        Tooltip.setPosition(evt.coordinate)
        $(TooltipElement).html(Msg).removeClass('hidden')
      }
      _iMap.on('pointermove', pointerMoveHandler)
      $(_iMap.getViewport()).on('mouseout', function() {
        $(TooltipElement).addClass('hidden')
      })

      /**
       * measureTooltip刷新事件
       */
      let listener
      const listenerCoord = function(sketch) {
        listener = sketch.getGeometry().on('change', function(evt) {
          const geom = evt.target
          let tooltipCoord = sketch.getCenter
          let output
          if (geom instanceof Polygon) {
            output = formatArea(geom)
            tooltipCoord = geom.getInteriorPoint().getCoordinates()
          } else if (geom instanceof LineString) {
            output = formatLength(geom)
            tooltipCoord = geom.getLastCoordinate()
          }
          if (geom instanceof Circle) {
            output = formatCircle(geom)
            tooltipCoord = geom.getCenter()
          }
          $(measureTooltipElement).html(output)
          // console.log("output:" + output + "____" + "innerText:" + $(measureTooltipElement).html());
          measureTooltip.setPosition(tooltipCoord)
        })
      }

      /**
       * 开始绘制事件侦听
       */
      // let newFence = null;
      // let bLock = false;

      this[type].on('drawstart', function(evt) {
        sketch = evt.feature
        const tooltipCoord = evt.coordinate
        listenerCoord(sketch, tooltipCoord) // 围栏监听
      }, this)

      /**
       * 结束绘制事件侦听
       */
      this[type].on('drawend', function(evt) {
        listenerCoord(evt.feature) // 围栏监听
        // console.log(evt.feature);

        self.newFence = evt.feature
        self.fenceId = ''
        self.fenceForm = { fenceType: [] }
        FenceSource.addFeature(self.newFence)
        if (self.newFence.getGeometry().getType() == 'Circle') {
          const coors = self.newFence.getGeometry().getCenter()
          const coorRadiu = self.newFence.getGeometry().getRadius()
          // console.log(coorRadiu);
          self.coors = '[' + _TransMetric(coors, 4).toString() + ']'
        } else {
          const coors = self.newFence.getGeometry().getCoordinates()
          self.coors = '[' + _TransMetric(coors, 4).toString() + ']'
        }
        self.fenceEditVisible = true
        if (self.$refs['fenceForm'] !== undefined) {
          self.$refs['fenceForm'].resetFields()
        }
        $(TooltipElement).addClass('hidden') // 隐藏工具条
        sketch = null
      }, this)
      /**
       * format length output
       * @param {ol.geom.LineString} line
       * @return {string}
       */
      const formatLength = function(line) {
        const length = Math.round(line.getLength() * 100) / 100 / _dPR
        let output
        if (length > 100) {
          output = Math.round((length / 1000) * 100) / 100 + ' ' + 'km'
        } else {
          output = Math.round(length * 100) / 100 + ' ' + 'm'
        }
        return output
      }
      /**
       * format length output
       * @param {ol.geom.Polygon} polygon
       * @return {string}
       */
      const formatArea = function(polygon) {
        const area = polygon.getArea() / _dPR / _dPR
        let output
        if (area > 10000) {
          output =
            Math.round((area / 1000000) * 100) / 100 + ' ' + 'km<sup>2</sup>'
        } else {
          output = Math.round(area * 100) / 100 + ' ' + 'm<sup>2</sup>'
        }
        return output
      }
      /**
       * format length output
       * @param {ol.geom.Circle} Circle
       * @return {string}
       */
      const formatCircle = function(Circle) {
        const area = (2 * Math.PI * Circle.getRadius()) / _dPR / _dPR
        let output
        if (area > 10000) {
          output =
            Math.round((area / 1000000) * 100) / 100 + ' ' + 'km<sup>2</sup>'
        } else {
          output = Math.round(area * 100) / 100 + ' ' + 'm<sup>2</sup>'
        }
        return output
      }
      //* *****************绘制电子围栏tooltip结束******************//
    },

    fenceDraw_getActive: function() {
      return this.activeType ? this[this.activeType].getActive() : false
    },
    fenceDraw_setActive: function(active, type) {
      if (active) {
        this.activeType && this[this.activeType].setActive(false, type)
        this[type].setActive(true, type)
        this.fenceDraw_setEvents(type)
        this.activeType = type
      } else {
        this.activeType && this[this.activeType].setActive(false, type)
        this.activeType = null
      }
    },
    fenceDraw_Destroy: function() {
      if (this._snap != null && this._drawForm != null) {
        this.fenceDraw_setActive(false, this._tempval)
        _iMap.removeInteraction(this._snap)
        _iMap.removeInteraction(this._drawForm)
      }
    },

    /**
     * 修改围栏开始
     */

    fenceModify_init: function() {
      const self = this
      this._select = new Select()
      _iMap.addInteraction(this._select)
      this._select.on('select', function(e) {
        if (self.$refs['fenceForm'] !== undefined) {
          self.$refs['fenceForm'].resetFields()
        }
        self.fenceEditVisible = true
        if (e.selected.length > 0) { // 鼠标移入，选择了一个，大概是mouseover事件
          e.selected.forEach(function(f) {
            self.fenceId = f.get('id')
            const obj = {}
            self.$api.fencemanage.fenceOneInfo(self.fenceId).then(res => {
              const RES = self.responseUse(res)
              obj.fenceName = RES.fenceName
              obj.fenceType = RES.fenceType.split(',')
              self.coors = RES.posGroup
              console.log(self.coors)
              self.fenceForm = obj
            })
          })
        }
      })
      this.fenceModify_setEvents()
      this.fenceModify_Modify()
    },
    fenceModify_Modify: function() {
      const self = this
      const _selectedFeatures = this._select.getFeatures()
      this._modify = new Modify({
        features: _selectedFeatures,
        insertVertexCondition: function() {
          // prevent new vertices to be added to the polygons
          return !this.features_.getArray().every(function(feature) {
            return feature
              .getGeometry()
              .getType()
              .match(/Polygon/)
          })
        }
      })
      _iMap.addInteraction(this._modify)
      /**
       * 结束修改事件侦听
       */
      this._modify.on('modifyend', function(evt) {
        if (self.$refs['form'] !== undefined) {
          self.$refs['form'].resetFields()
        }
        _selectedFeatures.forEach(function(e) {
          const coordinate = e.getGeometry().getCoordinates()
          const coor = '[' + _TransMetric(coordinate, 4) + ']'
          const param = {
            'idx': e.get('id'),
            'posGroupArray': eval(coor),
            'fenceName': e.get('name'),
            'fenceType': e.get('fenceType'),
            'layerId': e.get('layerId')
          }
          self.$api.fencemanage.addFence(param).then(res => {
            const RES = this.responseUse(res, true)
            console.log(res)
          })
        })
      }, this
      )
    },
    fenceModify_Drag: function(_selectedFeatures) {
      this._translate = new Translate({
        features: _selectedFeatures
      })
      _iMap.addInteraction(this._translate)
    },
    fenceModify_Delete: function() {
      const _selectedFeatures = this._select.getFeatures()
      const self = this
      // console.log(_selectedFeatures);
      _selectedFeatures.forEach(function(e) {
        // console.log("id:" + e.get('id'));
        self.selectFeature = e
        self.idx = e.get('id')
        self.delFenceVisible = true
      })
      // _selectedFeatures.forEach(_selectedFeatures.remove, _selectedFeatures);
      _selectedFeatures.clear()
    },

    fenceModify_getSelectFeatures: function() {
      return this._select.getFeatures()
    },

    fenceModify_setEvents: function() {
      const self = this
      const _selectedFeatures = this._select.getFeatures()
      this._select.on('change:active', function() {
        _selectedFeatures.forEach(_selectedFeatures.remove, _selectedFeatures)
      })
      this.fenceModify_Drag(_selectedFeatures) // 增加拖拽
      /**
       * 结束拖拽事件侦听
       */
      this._translate.on('translateend', function(evt) {
        _selectedFeatures.forEach(function(e) {
          const coordinate = e.getGeometry().getCoordinates()
          const coor = '[' + _TransMetric(coordinate, 4) + ']'
          const param = {
            'idx': e.get('id'),
            'posGroupArray': eval(coor)
          }
          self.$api.fencemanage.addFence(param).then(res => {
            const RES = this.responseUse(res, true)
            if (RES) {

            }
          })
        })
      })
    },
    fenceModify_setActive: function(active) {
      this._select.setActive(active)
      this._modify.setActive(active)
    },
    fenceModify_Destroy: function() {
      if (this._select != null && this._translate != null) {
        // this.setActive(false);
        _iMap.removeInteraction(this._select)
        _iMap.removeInteraction(this._translate)
        _iMap.removeInteraction(this._modify)
        console.log('销毁FenceModify事件')
      }
    }
  }

}
</script>

<style scoped>
  #body{
    width: 100%;
    height: 100%;
    overflow: hidden;
    /*background-color: #fff;*/
  }
  .vue-treeselect{
    width:200px;
    display: inline-block;
    height : 32px;
    top:8px;
  }
  .content2>>>.vue-treeselect__control{
    height : 32px;
    box-sizing:border-box;
  }
  .content2>>>.vue-treeselect__placeholder{
    font-size: 12px;
  }
  .content2>>>.vue-treeselect__menu{
    font-size: 12px;
  }
  .content2>>>.vue-treeselect__single-value{
    font-size: 12px;
  }
#panel {
  width: 270px;
  height: 200px;
  position: fixed;
  z-index: 100;
  transition: right 1s;
  -moz-transition: right 1s; /* Firefox 4 */
  -webkit-transition: right 1s; /* Safari 和 Chrome */
  -o-transition: right 1s; /* Opera */
}
#panel .isShow {
  width: 30px;
  height: 100%;
  float: left;
  margin-bottom: 5px;
}
#panel .isShow span {
  display: block;
  width: 30px;
  height: 30px;
  margin: 0 auto;
  position: absolute;
  /*top: 50%;*/
  /*margin-top: -24px;*/
  margin-left: 2px;
  background-color: #00d1b2;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
}
  #panel .content2 {
    background-color: #fff;
    padding: 10px;
    float: right;
    width: 248px;
    height: 100%;
    border: #d0c4cc 1px solid;
  }

  .titleHandle{
    width:100%;
  }
  .titleHandle>div{
    float: left;
  }
  .titleHandle>div+div{
    margin-left: 10px;
  }
  .positiondiv {
    position: absolute;
    left: 60px;
    bottom: 120px;
    width: auto;
    height: 20px;
    /* background-color: #fff; */
  }

  /*比例尺*/
  .scalediv {
    position: absolute;
    bottom: 90px;
    left: 60px;
    width: 100px;
    height: 15px;
    border-left: #000 solid 1px;
    border-bottom: #000 solid 1px;
    border-right: #000 solid 1px;
    /* background-color: #fff; */
  }

  .scalediv span {
    position: absolute;
    bottom: 2px;
    width: 100px;
    /* margin: 0 auto; */
    text-align: center;
    /* background-color: #fff; */
  }
  /* #mapbox >>>.ol-unselectable {
    bottom: 30px !important;
  } */
</style>
